<template>
  <div class="check_apply">
    <header-com title="查看参赛情况" moduleName="match"></header-com>
    <div class="matchName">
      <span class="applyName">{{name}}</span>
      <img :src="logo" class="logo" />
    </div>
    <div class="perject">{{perject_name}}</div>
    <van-cell-group v-for="(item, index) in project" :key="index" class='cell-group'>
      <van-cell title="姓名" :value="item.self" class='cell' />
      <van-cell title="比赛日期" :value="item.match_date" class='cell' />
      <van-cell title="轮次" class="cell">
        <template>
          <div v-if="item.com_system_type != 3 && item.com_system_type != 5 && item.com_system_type != 2">第{{ item.stage }}阶段
            <span v-if="item.stage == 1 || item.com_system_type == 4">第{{ item.wheel }}轮</span>
            <span v-if="item.stage == 2  && item.com_system_type == 1">{{ item | wheelName }}</span>
          </div>
          <!-- 预选赛 -->
          <div v-else-if="item.com_system_type == 5">{{ item.second_order + 1 }}区 {{ item | wheelName }}</div>
          <!-- 单循环 -->
          <div v-else-if="item.com_system_type == 2">第{{ item.wheel }}轮</div>
          <!-- 单淘汰 -->
          <div v-else>
            <span>{{ item | wheelName }}</span>
          </div>
        </template>
      </van-cell>
      <van-cell title="裁判" :value="item.ref_name" class='cell' />
      <van-cell title="比赛用时" :value="item.match_time" class='cell' />
      <van-cell title="对手" :value="item.rival" class='cell' />
      <van-cell title="比分" :value="item.score" class='cell' />
      <van-cell title="胜负" class="cell">
        <template>
          <span :class="{win:item.outcome == '胜',fail:item.outcome == '负'}">{{item.outcome}}</span>
        </template>
      </van-cell>
    </van-cell-group>
  </div>
</template>
<script>
  import {
    Toast,
    Cell,
    CellGroup
  } from 'vant';
  export default {
    data() {
      return {
        project: [],
        name: this.$route.query.name,
        logo: this.$route.query.logo,
        perject_name: this.$route.query.perject_name,
        group_id: this.$route.query.group_id
      };
    },
    created() {
      this.com_list();
    },
    filters: {
      wheelName: battle => {
        let maxWheel = battle.wheels
        let wheel = battle.wheel
        let wheelName = ''
        let field = battle.field
        //没有淘汰附加赛
        if (battle.isno == 0) {
          if (wheel == maxWheel) wheelName = '决赛'
          if (wheel == (parseInt(maxWheel) - 1)) wheelName = '半决赛'
        }
        // 有淘汰附加赛
        else if (battle.isno == 1) {
          // 最后一轮
          if (wheel == parseInt(maxWheel) && field == 1) wheelName = '决赛'
          if (wheel == parseInt(maxWheel) && field == 2) wheelName = '5-6淘汰附加赛'
          if (wheel == parseInt(maxWheel) && field == 3) wheelName = '3-4淘汰附加赛'
          if (wheel == parseInt(maxWheel) && field == 4) wheelName = '7-8淘汰附加赛'
          // 倒数第二轮
          if (wheel == (parseInt(maxWheel) - 1) && (field == 1 || field == 2)) wheelName = '半决赛'
          if (wheel == (parseInt(maxWheel) - 1) && (field == 3 || field == 4)) wheelName = '5-8淘汰附加赛'
        }
        if (wheel == (parseInt(maxWheel) - 2)) wheelName = '1/4决赛'
        if (wheel < (parseInt(maxWheel) - 2)) wheelName = `第${battle.wheel}轮`
        return wheelName
      }
    },
    mounted() {},
    computed: {},
    methods: {
      com_list() {
        var params = new URLSearchParams();
        params.append('group_id', this.group_id);
        this.$axios
          .post('/mobile/v1/PersonalCenter/attend_com_info', params, {
            headers: {
              token: window.sessionStorage.getItem('token')
            }
          })
          .then(res => {
            let {
              code,
              data,
              msg
            } = res.data
            if (code == 2000) {
              this.project = data
            } else {
              Toast(msg);
            }
          })
          .catch(res => {});
      },
    }
  };
</script>
<style lang="less" scoped>
  .check_apply {
    .matchName {
      height: 0.8rem;
      line-height: 0.8rem;
      font-weight: bold;
      font-size: 0.34rem;
      padding: 0 15px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .applyName {
        width: 80%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        text-align: left;
      }

      .logo {
        display: inline-block;
        width: 0.6rem;
        height: 0.6rem;
      }
    }

    .cell-group {
      margin-bottom: 10px;
    }

    .cell {
      text-align: left;
    }

    .perject {
      text-align: left;
      font-size: 0.3rem;
      height: 0.8rem;
      line-height: 0.8rem;
      background: #eee;
      padding: 0px 15px;
    }

    .win {
      color: #259b24;
    }

    .fail {
      color: #e51c23;
    }
  }
</style>
